{include file='common/_meta' /}
<body>
<div class="container">
	<div class="layui-row">
        <div class="layui-col-md12 breadcrumb">
    		<span class="layui-breadcrumb">
    			<a><cite>国际短信价格</cite></a>
    			<a><cite>国际短信价格查询</cite></a>
    		</span>
        </div>
    </div>
    <div class="layui-row">
    	<form class="layui-form" action="" lay-filter="" style="padding-top: 15px;" id="search-form">
    		<div class="layui-col-sm4">
				<div class="layui-form-item">
				    <label class="layui-form-label">国家：</label>
				    <div class="layui-input-block">
			     	 	<select name="country_code" lay-search>
				        	<option value="">全部</option>
                            {volist name='countryCodeInfo' id='v'}
                            <option value="{$v.code}"> {$v.country} ({$v.en_country}) {$v.code} </option>
                            {/volist}
				      	</select>
				    </div>
			  	</div>
    		</div>
			<div class="layui-col-sm4">
				<div class="layui-input-block">
			      	<button class="layui-btn custom-sm-fluid" lay-submit lay-filter="custom-search">搜索</button>
			    </div>
    		</div>
    	</form>
    </div>
	<div class="layui-col-md12">
		<table class="layui-hide" id="initdate" lay-filter="datatable"></table>
        <script type="text/html" id="toolbarDemo">
        </script>
        <script type="text/html" id="barDemo">
        </script>
	</div>
</div>
{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{:$Think.config.__STATIC__}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
layui.use(['table', 'layer', 'form'], function() {

	var table = layui.table;
	var layer = layui.layer;
	var form  = layui.form;

    var tableIns = table.render({
        elem: '#initdate',
		url:'{:url("index")}',
		cellMinWidth: 80,
		toolbar: '#toolbarDemo',
		defaultToolbar: [],
		method:'get',
		where: {api: 1},
		page:true,
		limit:20,
		limits: [20,30,40,50,60,70,80,90],
        cols: [[
			{field:'country_name', title: '国家', minWidth: 120,align: 'center'},
			{field:'price', title: '短信单价',align: 'center', minWidth: 120 , templet:function(d){
				return d.price+' '+d.currency_code
			}}
        ]]
    });

    //监听头工具
    table.on('toolbar(datatable)', function(obj) {
        switch(obj.event) {
        }
    });

    //监听工具条
  	table.on('tool(datatable)', function(obj) {
        var data = obj.data;
        switch(obj.event) {

        }

    });

  	// 监听搜索事件
    form.on('submit(custom-search)', function(data) {
      	tableIns.reload({
        	where: {country_code: data.field.country_code, api: 1}
        	,page: {curr: 1}
      	});

        $(window).resize()

      	return false;
    });

    /*解决操作按钮收缩，打开tips框不生效问题 start*/
    $(document).off('mousedown', '.layui-table-grid-down').on('mousedown', '.layui-table-grid-down', function (even) {

        table._tableTrCurr = $(this).closest('td');
    });

    $(document).off('click', '.layui-table-tips-main [lay-event]').on('click', '.layui-table-tips-main [lay-event]', function (even) {

        var elem = $(this);
        var tableTrCurr = table._tableTrCurr;

        if (!tableTrCurr) {

            return;
        }

        var layerIndex = elem.closest('.layui-table-tips').attr('times');
        layer.close(layerIndex);

        table._tableTrCurr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });
    /*解决操作按钮收缩，打开tips框不生效问题 end*/

});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
